<template>
  <el-form :model="tracherfilesfrom">
    <el-form-item label="课件名称">
      <el-input v-model="tracherfilesfrom.info.name"></el-input>
    </el-form-item>
    <el-form-item label="课件类型">
      <el-select v-model="tracherfilesfrom.info.type" placeholder="请选择">
        <el-option
          v-for="item in tracherfilesfromtype"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="选取课件">
      <button
        type="button"
        @click="innerVisible = true"
        class="btn btn-info el-form-item__label text-white"
        style="width:80px"
      >选取课件</button>
      <el-input :value="tracherfilesfrom.fileurl" disabled></el-input>
    </el-form-item>
    <el-form-item class="text-right" label="提交">
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
    </el-form-item>
    <el-dialog width="80%" title="选取图片" :visible.sync="innerVisible" append-to-body>
      <ossImglist v-bind:selected="selected"></ossImglist>
    </el-dialog>
  </el-form>
</template>

<script>
import { asyncuploadCoursefile } from "../../../plugins/api.js";
import ossImglist from "@/components/newpublic/oss.vue";
export default {
  name: "addResources",
  components: {
    ossImglist
  },
  data() {
    return {
      tracherfilesfromtype: [
        {
          value: 0,
          label: "教师专用"
        },
        {
          value: 1,
          label: "程序"
        }
      ],
      innerVisible: false,
      tracherfilesfrom: {
        info: {
          name: "",
          type: 0
        },
        fileurl: "",
        courseid: this.id,
        uploaduserid: ""
      }
    };
  },
  props: ["id", "setdialog", "gettracherfiles"],
  mounted() {
    this.tracherfilesfrom.courseid = this.id;
    this.tracherfilesfrom.uploaduserid = this.$store.state.user.userid;
  },
  methods: {
    selected(url) {
      this.tracherfilesfrom.fileurl = url;
      this.innerVisible = false;
    },
    async onSubmit() {
      try {
        const { tracherfilesfrom, gettracherfiles, id } = this;
        await asyncuploadCoursefile(tracherfilesfrom);
        this.setdialog();
        await gettracherfiles(id);
        this.$message("添加成功");
      } catch (err) {
        this.$alert(err);
      }
    }
  }
};
</script>
